<template>
    <div>
        <div class="container">
            <div class="scroll-list">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <!-- 下面代码是为了让滚动内容能够多展示一屏(去除留白/无限轮播)：数量请自行根据高度进行计算 -->
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useStore } from 'vuex'
const store = useStore()
store.commit(
    "setComponentPath",
    "src/views/Native/PureCSS/pages/FormCarousel/FormCarousel.vue"
);
</script>
<style lang="scss" scoped>
.container {
    position: relative;
    background-color: #a4ffcc;
    /* 父容器需要有明确的高度 */
    height: 300px;
    width: 200px;
    margin: auto;
    overflow: hidden;

    .scroll-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: scroll 10s linear infinite normal;

        >div {
            width: 100%;
            /* 滚动的项目需要有具体的高度 */
            height: 30px;
            background-color: #1ea7ff;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;

            &:nth-child(2n) {
                background-color: #18d9f8;
            }
        }
    }
}

@keyframes scroll {
    100% {
        /* 需要滚动内容的总高度 */
        top: -300px;
    }
}

.container>.scroll-list {
    animation-play-state: running;
}

.container>.scroll-list:hover {
    animation-play-state: paused;
}
</style>